<template>
    <view class="scroll-classify-components" :style="[wrapStyle, componentsStyle]" v-if="moduleData.length">
        <scroll-view scroll-x show-scrollbar>
            <view class="classify-list" :style="[classifyStyle]">
                <view class="classify-item" hover-class="classify-item--hover" :style="[classifyItemStyle]" v-for="(item, index) in moduleData" :key="index" @click="handleClick(item)">
                    <image class="classify-image" :style="[classifyItemImageStyle]" :src="item[imgKey]" mode=""></image>
                    <text class="classify-text text-cut-1" :style="[classifyItemNameStyle]">{{ item[nameKey] }}</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
/**
 * scroll-classify 滚动分类组件
 * @description 横向滚动分类组件
 */
import mixins from '@/mixins/components.js';
export default {
    name: 'scroll-classify',
    mixins: [mixins],
    props: {
        row: {
            type: Number,
            default: 2
        },
        rowSpace: {
            type: Number,
            default: 30
        },
        colSpace: {
            type: Number,
            default: 30
        },
        itemWidth: {
            type: Number,
            default: 100
        },
        imgWidth: {
            type: Number,
            default: 96
        },
        imgHeight: {
            type: Number,
            default: 96
        },
        imgRadius: {
            type: [String, Number],
            default: 0
        },
        textColor: {
            type: String,
            default: '#333333'
        },
        textSize: {
            type: [String, Number],
            default: 24
        },
        imgKey: {
            type: String,
            default: 'url'
        },
        nameKey: {
            type: String,
            default: 'name'
        },
        zIndex: {
            type: [String, Number],
            default: 99
        }
    },
    computed: {
        componentsStyle() {
            let style = {};
            style.zIndex = this.zIndex;
            return style;
        },
        classifyStyle() {
        	let style = {};
        	style.width = (this.moduleData.length / this.row) * (this.itemWidth + this.colSpace) + 'rpx';
        	return style;
        },
        classifyItemStyle() {
        	let style = {};
        	style.width = this.itemWidth + 'rpx';
            style.marginRight = this.colSpace + 'rpx';
            style.marginBottom = this.rowSpace + 'rpx';
        	return style;
        },
        classifyItemImageStyle(){
            let style = {};
            style.width = this.imgWidth + 'rpx';
            style.height = this.imgHeight + 'rpx';
            style.borderRadius = /[rpx]/.test(this.imgRadius) ? this.imgRadius : `${this.imgRadius}rpx`;
            return style;
        },
        classifyItemNameStyle(){
            let style = {};
            style.color = this.textColor;
            style.fontSize = /[rpx]/.test(this.textSize) ? this.textSize : `${this.textSize}rpx`;
            return style;
        }

    },
    methods: {
        // 点击事件
        handleClick(item) {
            this.$emit('click', item);
        }
    }
};
</script>

<style scoped lang="scss">
.scroll-classify-components {
    padding-top: 30rpx;
    .classify-list {
        min-width: 750rpx;
        display: flex;
        flex-wrap: wrap;
        .classify-item {
            display: flex;
            overflow: hidden;
            align-items: center;
            flex-direction: column;
            &--hover{
                opacity: 0.8;
            }
            .classify-image {

            }
            .classify-text {
                margin-top: 10rpx;
            }
        }
    }
}
</style>
